import {
  AppstoreOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons'
// import { MyAwesomeComponent } from '@lingma/common'
// import { MyAwesomeComponent11 } from '@lingma/demo1'
import { Button, Layout, Menu, theme } from 'antd'
import { useState } from 'react'
import { BrowserRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
import './App.css'
import { BaseUIPaginationPage } from './pages/BaseUIPaginationPage'
import { BaseUISelectPage } from './pages/BaseUISelectPage'

const { Header, Sider, Content } = Layout

function App() {
  return (
    <BrowserRouter
      future={{
        v7_startTransition: true,
        v7_relativeSplatPath: true,
      }}
    >
      <AppShell />
    </BrowserRouter>
  )
}

function AppShell() {
  const [collapsed, setCollapsed] = useState(false)
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()
  const navigate = useNavigate()
  const location = useLocation()
  const selectedKey = location.pathname === '/' ? '/base-ui-select' : location.pathname

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          onClick={({ key }) => {
            // 点击菜单时进行路由跳转
            navigate(String(key))
          }}
          items={[
            {
              key: '/base-ui-select',
              icon: <AppstoreOutlined />,
              label: 'BaseUISelect 组件示例',
            },
            {
              key: '/base-ui-pagination',
              icon: <UnorderedListOutlined />,
              label: 'BaseUIPagination 组件示例',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          {/* 路由渲染区域 */}
          <Routes>
            <Route path="/" element={<Navigate to="/base-ui-select" replace />} />
            <Route path="/base-ui-select" element={<BaseUISelectPage />} />
            <Route path="/base-ui-pagination" element={<BaseUIPaginationPage />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  )
}

export default App
